<template>
    <div class="container bgs">
        <div class="navs">
            <div class="pric" @click="goBlack"></div>
            <div class="title">我的收藏</div>
        </div>

        <div class="listsing" v-if="list.length == 0">
            <div class="img"><img src="../assets/img/gamelist.png" alt=""></div>
            <div class="texts">暂无收藏记录</div>
            <div class="togogo"><button @click="togogo">去逛逛</button></div>
        </div>

        <div v-if="list.length != 0">
            <div class="shopImg1" v-for="(item, index) in list" :key="index">
                <div class="img">
                    <img :src="item.imgs" alt="">
                    <div class="pofont">账号</div>
                </div>
                <div class="rightFont1" @click="next(item.id)">
                    <div class="title1">{{ item.gamePlatformName }}/{{ item.gameServerName }}</div>
                    <div class="title1">订单编号:{{ item.gamePlatformId }}</div>
                    <div class="title2">￥{{ item.price }}</div>
                </div>
                <div class="del" @click="del(index)"></div>
            </div>
        </div>

        <van-divider>猜你喜欢</van-divider>

        <div class="getLists">
            <ul class="ul">
                <li v-for="(item, index) in listData" :key="index" @click="goadd">
                    <div class="lefta">
                        <div class="img">
                            <img ref="img" @click="imgs(index)" :src="item.imgs" alt="">
                            <div class="floats">1/1</div>
                        </div>

                    </div>

                    <div class="right" @click="next(item.id)">
                        <div class="title">{{ item.title }}</div>
                        <div class="symb">{{ item.operatorName }}/{{ item.gameServerName }}</div>
                        <div class="price"><span>￥</span>{{ item.price }}</div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
import { getlistData } from "../assets/api/home.js";
import { ImagePreview } from 'vant';
export default {
    props: ["ListData"],
    data() {
        return {
            list: null,
            listData: null,
            indexs: 2
        };
    },
    methods: {
        togogo() {
            this.$router.push("/buy")
        },
        goBlack() {
            this.$router.go(-1)
        },
        getlistDataFun() {
            getlistData().then((data) => {
                this.listData = data.data.Data.hits
                console.log(this.listData);
            })
        },
        imgs(id) {
            console.log(this.$refs.img[id].currentSrc);
            ImagePreview({
                // currentSrc
                images: [
                    this.$refs.img[id].currentSrc
                ],
                closeable: true,
                closeIconPosition: 'top-left',
            });
        },
        next(id) {
            // let {keyWordQ,imgs,title,operatorName,price} =this.listData;
            var obj = this.listData.find((obj) => obj.id === id);
            if (obj == -1) {
                console.log("errey");
            } else {
                window.localStorage.setItem("obj", JSON.stringify(obj))
            }
            this.$router.push('/trade')
        },
        goadd() {

        },
        del(index){
            // console.log(index);
            // this.ListData.splice(index,1)
            this.$emit("del",index)
        }
    },
    created() {
        this.getlistDataFun()
        this.list = this.ListData
        console.log(this.list);
    }
}
</script>

<style lang="scss">
@import "../assets/css/base.css";

.bgs {
    background-color: #f1f1f1;
    height: 100%;
}

.navs {
    height: 47px;
    line-height: 47px;
    background-color: #f6f6f6;
    display: flex;
    align-items: center;

    .pric {
        width: 37px;
        height: 100%;
        background: url(../assets/img/left.png)no-repeat center center;
        background-size: 30%;
    }

    .title {
        flex: 1;
        text-align: center;
        font-size: 16px;
        color: #0b1c35;
    }
}

.listsing {
    padding: 0 14px;

    .img {
        padding-top: 72px;
    }

    .texts {
        width: 100%;
        text-align: center;
        font-size: 14px;
        color: #8b8c8d;
    }

    .togogo {
        display: flex;
        justify-content: center;
        flex: 1;

        button {
            width: 105px;
            height: 31px;
            text-align: center;
            border: 1px solid #e2e2e2;
            font-size: 14px;
            color: #545351;
            margin-top: 21px;

        }
    }
}

.shopImg1 {
    padding-left: 15px;
    margin-top: 12px;
    border-bottom: 2px solid #efefef;
    display: flex;
    position: relative;
    overflow: hidden;

    .img {
        width: 95px;
        height: 75px;
        position: relative;

        img {
            height: 100%;
            width: 100%;
        }

        .pofont {
            width: 100%;
            background-color: #000000;
            color: #f9fdff;
            font-size: 11px;
            text-align: center;
            position: absolute;
            bottom: 0px;
            left: 0;
            right: 0;
            margin: auto;
        }
    }

    .rightFont1 {
        padding-left: 10px;
        width: 100%;
        height: 75px;
        padding-top: 6px;
        background-color: #fafafa;

        .title1 {
            width: 200px;
            height: 20px;
            line-height: 20px;
            font-size: 13px;
            color: #484848;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .title2 {
            height: 20px;
            line-height: 20px;
            font-size: 15px;
            color: #ff6600;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    }

    .del {
        width: 30px;
        height: 30px;
        position: absolute;
        // display: none;
        bottom: 4px;
        left: 350px;
        background: url(../assets/img/del.png)no-repeat center center;
        background-size: 20px 20px;
    }

}


.getLists {
    background-color: #f1f1f1;
    margin: 0 5px;

    .ul {
        li {
            display: flex;
            background-color: #fafafa;
            margin-top: 10px;

            .lefta {
                width: 97px;
                height: 140px;

                padding: 14px 14px 12px 6px;

                .img {
                    width: 97px;
                    height: 97px;
                    position: relative;
                    border: 1px solid #d2d2d2;

                    img {
                        height: 100%;
                    }
                }

                .floats {
                    position: absolute;
                    bottom: 5px;
                    right: 6px;
                    width: 40px;
                    height: 26px;
                    color: #fff;
                    font-size: 10px;
                    font-weight: 500;
                    line-height: 26px;
                    text-align: center;
                    background-color: rgba(0, 0, 0, 0.5);
                }
            }

            .right {
                padding: 14px 14px 12px 14px;

                .title {
                    color: #0e0206;
                    font-size: 18px;
                    font-weight: 700;
                }

                .symb {
                    margin-top: 5px;
                    font-size: 13px;
                    height: 16px;
                    line-height: 16px;
                    color: #808080;
                }

                .price {
                    color: #ff7729;
                    font-size: 16px;
                    font-weight: 700;
                }
            }
        }
    }
}
</style>